<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="visible"
    class="mike-banner-select"
    title="首页Banner设置"
    top="5vh"
    width="80vw"
  >
    <el-row class="selection-header">
      <el-form label-width="80px">
        <el-form-item label="型号SN8">
          <sn8-select
            :sn8.sync="sn8"
            @change="sn8Changed"/>
        </el-form-item>

        <el-form-item
          label="已选"
          v-loading="bannerLoading"
          v-if="sn8 && sn8.length > 0">
          <div class="current-banners">
            <el-tag
              size="medium"
              :key="banner.id"
              :type="banner.tagType"
              v-for="banner in currentBanners"
              @close="removeFromBanner(banner)"
              closable
            >{{ banner.name }}</el-tag>
          </div>
        </el-form-item>
      </el-form>
    </el-row>

    <el-row
      class="selection-container"
      v-if="sn8 && sn8.length > 0">
      <!--            Segment/Type -->
      <el-col :span="4">
        <el-menu
          :default-active="activeTabIndex"
          @select="onTabMenuSelect"
          class="banner-el-menu"
          mode="vertical"
        >
          <el-menu-item index="1">菜谱</el-menu-item>
          <el-menu-item index="2">合集</el-menu-item>
          <el-menu-item index="3">活动</el-menu-item>
        </el-menu>
      </el-col>

      <!--            Table Content -->
      <el-col :span="20">
        <div class="content-wrapper">
          <!--    Recipe-->
          <div
            class="recipe-table"
            v-if="activeTabIndex === '1'">
            <el-form
              :inline="true"
              @keyup.enter.native="getDataList()"
              class="recipe-filter-form filter-form"
            >
              <el-form-item>
                <el-input
                  clearable
                  placeholder="菜谱名称"
                  v-model="dataForm.name">
                  <el-button
                    @click="getDataList()"
                    slot="append">
                    <i class="el-icon-search"/>
                  </el-button>
                </el-input>
              </el-form-item>
            </el-form>

            <el-table
              :data="recipes"
              height="700"
              key="recipe"
              v-loading="loading">
              <!--                            <el-table-column align="center" header-align="center" width="50">-->
              <!--                                <template slot-scope="scope">-->
              <!--                                    <el-checkbox @change="itemCheckedChanged(scope.row)"-->
              <!--                                                 v-model="scope.row.checked"></el-checkbox>-->
              <!--                                </template>-->
              <!--                            </el-table-column>-->

              <el-table-column
                :label="$t('mike.img')"
                align="center"
                header-align="center"
                width="80"
              >
                <template slot-scope="scope">
                  <div class="text-center is-align-middle is-justify-center el-row--flex">
                    <midea-admin-image
                      :height="60"
                      :previewable="true"
                      :url="scope.row.picUrl"
                      :width="60"
                    />
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="$t('model.name')"
                align="center"
                header-align="center"
                prop="name"
              />
              <el-table-column
                :label="$t('model.description')"
                :show-overflow-tooltip="true"
                align="center"
                header-align="center"
                prop="abstruct"
              />

              <el-table-column
                :label="$t('handle')"
                align="center"
                header-align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="removeFromBanner(scope.row)"
                    size="small"
                    type="danger"
                    plain
                    v-if="scope.row.checked"
                  >
                    <i class="el-icon-minus"/>
                    {{ $t("mike.remove_banner") }}
                  </el-button>
                  <el-button
                    @click="addToBanner(scope.row)"
                    size="small"
                    type="primary"
                    plain
                    v-else
                  >
                    <i class="el-icon-plus"/>
                    {{ $t("mike.add_banner") }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination text-right">
              <el-pagination
                :current-page="page"
                :page-size="limit"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                @current-change="pageCurrentChangeHandle"
                @size-change="pageSizeChangeHandle"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </div>
          </div>
          <!--    Collection-->
          <div
            class="collection-table"
            v-if="activeTabIndex === '2'">
            <el-form
              :inline="true"
              @keyup.enter.native="getDataList()"
              class="collection-filter-form filter-form"
            >
              <el-form-item>
                <el-input
                  clearable
                  placeholder="合集名称"
                  v-model="dataForm.name">
                  <el-button
                    @click="getDataList()"
                    slot="append">
                    <i class="el-icon-search"/>
                  </el-button>
                </el-input>
              </el-form-item>
            </el-form>

            <el-table
              :data="collections"
              height="800"
              key="collection"
              v-loading="loading">
              <el-table-column
                :label="$t('mike.detailImg')"
                align="center"
                header-align="center"
                width="100"
              >
                <template slot-scope="scope">
                  <div class="text-center is-align-middle is-justify-center el-row--flex">
                    <midea-admin-image
                      :height="60"
                      :previewable="true"
                      :url="scope.row.url"
                      :width="60"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('mike.homeImg')"
                align="center"
                header-align="center"
                width="100"
              >
                <template slot-scope="scope">
                  <div class="text-center is-align-middle is-justify-center el-row--flex">
                    <midea-admin-image
                      :height="60"
                      :previewable="true"
                      :url="scope.row.smallUrl"
                      :width="60"
                    />
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="$t('model.name')"
                align="center"
                header-align="center"
                prop="collectionName"
              />
              <el-table-column
                :label="$t('mike.sn8')"
                align="center"
                header-align="center"
                prop="sn8"
              />
              <el-table-column
                :label="$t('menu.sort')"
                align="center"
                header-align="center"
                prop="sort"
              />
              <el-table-column
                :label="$t('handle')"
                align="center"
                header-align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="removeFromBanner(scope.row)"
                    size="small"
                    type="danger"
                    plain
                    v-if="scope.row.checked"
                  >
                    <i class="el-icon-minus"/>
                    {{ $t("mike.remove_banner") }}
                  </el-button>
                  <el-button
                    @click="addToBanner(scope.row)"
                    size="small"
                    type="primary"
                    plain
                    v-else
                  >
                    <i class="el-icon-plus"/>
                    {{ $t("mike.add_banner") }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination text-right">
              <el-pagination
                :current-page="page"
                :page-size="limit"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                @current-change="pageCurrentChangeHandle"
                @size-change="pageSizeChangeHandle"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </div>
          </div>
          <!--    Activity-->
          <div
            class="activity-table"
            v-if="activeTabIndex === '3'">
            <el-table
              :data="activities"
              height="800"
              key="activity"
              v-loading="loading">
              <!--                            <el-table-column align="center" header-align="center" width="50">-->
              <!--                                <template slot-scope="scope">-->
              <!--                                    <el-checkbox @change="itemCheckedChanged(scope.row)"-->
              <!--                                                 v-model="scope.row.checked"></el-checkbox>-->
              <!--                                </template>-->
              <!--                            </el-table-column>-->

              <el-table-column
                :label="$t('mike.img')"
                align="center"
                header-align="center"
                width="100"
              >
                <template slot-scope="scope">
                  <div class="text-center is-align-middle is-justify-center el-row--flex">
                    <midea-admin-image
                      :height="60"
                      :previewable="true"
                      :url="scope.row.url"
                      :width="60"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('model.name')"
                align="center"
                header-align="center"
                prop="name"
              />
              <el-table-column
                :label="$t('mike.link')"
                align="center"
                header-align="center"
                prop="link"
              >
                <template slot-scope="scope">
                  <a
                    :href="scope.row.link"
                    target="_blank">
                    {{
                      scope.row.link
                    }}
                  </a>
                </template>
              </el-table-column>

              <el-table-column
                :label="$t('mike.sn8')"
                align="center"
                header-align="center"
                prop="sn8"
              />

              <el-table-column
                :label="$t('model.createTime')"
                align="center"
                header-align="center"
                prop="createTime"
              />
              <el-table-column
                :label="$t('handle')"
                align="center"
                header-align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="removeFromBanner(scope.row)"
                    size="small"
                    type="danger"
                    plain
                    v-if="scope.row.checked"
                  >
                    <i class="el-icon-minus"/>
                    {{ $t("mike.remove_banner") }}
                  </el-button>
                  <el-button
                    @click="addToBanner(scope.row)"
                    size="small"
                    type="primary"
                    plain
                    v-else
                  >
                    <i class="el-icon-plus"/>
                    {{ $t("mike.add_banner") }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination text-right">
              <el-pagination
                :current-page="page"
                :page-size="limit"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                @current-change="pageCurrentChangeHandle"
                @size-change="pageSizeChangeHandle"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!--    <template slot="footer">-->
    <!--      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>-->
    <!--      <el-button @click="clickOnConfirm()" type="primary"-->
    <!--        >{{ $t("confirm") }}-->
    <!--      </el-button>-->
    <!--    </template>-->
  </el-dialog>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'
import { MikeBannerType } from '@/utils/consts'
import Sn8Select from '@/components/sn8.select'

export default {
  name: 'MikeBannerSelect',
  components: { Sn8Select },
  mixins: [mixinViewModule],
  data () {
    return {
      currentBanners: [],
      visible: false,
      activeTabIndex: '1',
      loading: false,
      requesting: false,
      collections: [],
      recipes: [],
      activities: [],
      bannerLoading: false,
      // page: 1,
      // limit: 10,
      // total: 0,
      sn8: '',
      dataForm: {
        name: '' // 菜谱名称
      }
    }
  },
  watch: {
    visible (newValue, oldValue) {
      if (!newValue) {
        this.clearData()
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        // this.getDataList()
        this.reload()
      })
    },
    sn8Changed () {
      if (!this.sn8 || this.sn8.length <= 0) {
        this.clearData()
        return
      }
      this.dataForm.name = ''

      this.reload()
    },
    onTabMenuSelect (key, keyPath) {
      this.dataForm.name = ''
      this.activeTabIndex = key
      this.reloadDataList()
    },
    // clickOnDelBanner (banner) {
    //   console.log(banner)
    // },

    /**
     * data loading
     * */
    clearData () {
      this.dataForm.name = ''
      this.page = 1
      this.limit = 10
      this.recipes = []
      this.collections = []
      this.activities = []
      this.sn8 = ''
      this.activeTabIndex = '1'
      this.currentBanners = []
    },
    reload () {
      this.getCurrentBanners().then(() => {
        this.reloadDataList()
      })
    },
    reloadDataList () {
      this.page = 1
      this.limit = 10
      this.getDataList()
    },

    getCurrentBanners () {
      return new Promise(resolve => {
        this.bannerLoading = true
        this.$http
          .post(
            `${this.mikeNetworkBase}midea/menu/collection/content/getrecommendall`,
            {
              currentPage: 1,
              pageSize: 1000,
              sn8: this.sn8
            }
          )
          .then(({ data: res }) => {
            this.currentBanners = res.data.map(item => {
              item.tagType =
                item.showTypes === 0
                  ? ''
                  : item.showTypes === 1
                    ? 'warning'
                    : 'info'
              return item
            })
            resolve()
          })
          .finally(() => {
            this.bannerLoading = false
          })
      })
    },

    getDataList () {
      if (this.activeTabIndex === '1') {
        this.loadRecipes()
      }
      if (this.activeTabIndex === '2') {
        this.loadCollections()
      }
      if (this.activeTabIndex === '3') {
        this.loadActivities()
      }
    },

    /**
     * Network loading
     * */

    loadActivities () {
      this.loading = true
      this.$http
        .post(`${this.mikeNetworkBase}/midea/menu/piclink/get/all`, {
          currentPage: this.page,
          pageSize: this.limit,
          sn8: this.sn8
        })
        .then(({ data: res }) => {
          this.loading = false

          if (res.code !== 200) {
            this.activities = []
            this.total = 0
            return this.$message.error(res.msg)
          }

          this.activities = this.handleResponseData(
            res.data,
            MikeBannerType.Activity
          )

          this.total = res.totalCounts
            ? res.totalCounts
            : this.activities && this.activities.length > 0
              ? this.activities[0].totalCounts
              : 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    loadCollections () {
      this.loading = true
      this.$http
        .post(`${this.mikeNetworkBase}midea/menu/collection/content/get/all`, {
          currentPage: this.page,
          pageSize: this.limit,
          sn8: this.sn8,
          ...this.dataForm
        })
        .then(({ data: res }) => {
          this.loading = false

          if (res.code !== 200) {
            this.collections = []
            this.total = 0
            return this.$message.error(res.msg)
          }

          this.collections = this.handleResponseData(
            res.data,
            MikeBannerType.Collection
          )

          this.total = res.totalCounts
            ? res.totalCounts
            : this.collections && this.collections.length > 0
              ? this.collections[0].totalCounts
              : 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    loadRecipes () {
      this.loading = true
      this.$http
        .post(`${this.mikeNetworkBase}midea/menu/collection/content/menu/get`, {
          currentPage: this.page,
          pageSize: this.limit,
          sn8: this.sn8,
          ...this.dataForm
        })
        .then(({ data: res }) => {
          this.loading = false

          if (res.code !== 200) {
            this.recipes = []
            this.total = 0
            return this.$message.error(res.msg)
          }
          this.recipes = this.handleResponseData(
            res.data,
            MikeBannerType.Recipe
          )

          this.total = res.totalCounts
            ? res.totalCounts
            : this.recipes && this.recipes.length > 0
              ? this.recipes[0].totalCounts
              : 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleResponseData (data, bannerType) {
      if (!data || data.length <= 0) {
        return data
      }

      data = data.map(item => {
        let idx = this.currentBanners.findIndex(banner => {
          return banner.id === item.id
        })
        item.checked = idx >= 0
        item.requesting = false
        item.showTypes = bannerType
        return item
      })
      return data
    }
  }
}
</script>

<style lang="scss" scoped>
.mike-banner-select {
  .filter-form {
    padding: 15px 15px 0 15px;
  }

  .banner-el-menu {
    border: 0;
  }

  .current-banners {
    span {
      margin-right: 10px;
    }
  }

  .selection-container {
    border-top: 1px solid #eeeeee;
  }

  .content-wrapper {
    min-height: 800px;
  }
}
</style>
